<template>
    <div>
        <div ref="demo">
            <article v-for="item in divData" :key="item.id" :ref="'container-' + item.id"
                @mousedown="mouseDownHandle(item.id, $event)" @mouseup="mouseUpHandle(item.id, $event)">
                <div>{{ item.titlie }}---{{ item.id }}</div>
                <div>{{ item.titlie }}---{{ item.id }}</div>
                <div>{{ item.titlie }}---{{ item.id }}</div>
            </article>
        </div>
    </div>
</template>

<script >
export default {
    name: "",
    data() {
        return {
            divData: [
                { titlie: '测试一', id: '001' },
                { titlie: '测试二', id: '002' },
                { titlie: '测试三', id: '003' },
                { titlie: '测试四', id: '004' },
                { titlie: '测试五', id: '005' }
            ],
            moveData: {},
            activeMove: null
        };
    },
    methods: {
        // 拖拽-鼠标放下
        mouseDownHandle(id, event) {
            this.activeMove = id
            //this.clickHandle(id)
            if (this.moveData[id]) {
                this.moveData[id].x = event.pageX - this.$refs[`container-${id}`][0].offsetLeft,
                    this.moveData[id].y = event.pageY - this.$refs[`container-${id}`][0].offsetTop
            } else {
                this.moveData[id] = {
                    x: event.pageX - this.$refs[`container-${id}`][0].offsetLeft,
                    y: event.pageY - this.$refs[`container-${id}`][0].offsetTop
                }
            }
            event.currentTarget.style.cursor = 'move'
            window.onmousemove = this.mouseMoveHandle
        },
        // 拖拽-鼠标移动
        mouseMoveHandle(event) {
            let moveLeft = event.pageX - this.moveData[this.activeMove].x + 'px'
            let moveTop = event.pageY - this.moveData[this.activeMove].y + 'px'
            console.log(event)
            this.$refs[`container-${this.activeMove}`][0].style.left = moveLeft
            this.$refs[`container-${this.activeMove}`][0].style.top = moveTop
        },
        // 拖拽-鼠标离开
        mouseUpHandle(id, event) {
            window.onmousemove = null
            event.currentTarget.style.cursor = 'move'
        },
    }
}
</script>

<style scoped>
  article:nth-of-type(1){
    cursor: move;
    background-color: silver;
    position: absolute;
    top: 20px;
    left: 50px;
    width: 199px;
    height: 100px;
    box-shadow: 0 2px 24px 2px hsla(205, 7%, 52%, .3);
  }
  article:nth-of-type(2){
    cursor: move;
    background-color: silver;
    position: absolute;
    top: 420px;
    left: 50px;
    width: 199px;
    height: 100px;
    box-shadow: 0 2px 24px 2px hsla(205, 7%, 52%, .3);
  }
  article:nth-of-type(3){
    cursor: move;
    background-color: silver;
    position: absolute;
    top: 420px;
    right: 30px;
    width: 199px;
    height: 100px;
    box-shadow: 0 2px 24px 2px hsla(205, 7%, 52%, .3);
  }
  article:nth-of-type(4){
    cursor: move;
    background-color: silver;
    position: absolute;
    top: 620px;
    left: 30px;
    width: 199px;
    height: 100px;
    box-shadow: 0 2px 24px 2px hsla(205, 7%, 52%, .3);
  }
    article:nth-of-type(5){
    cursor: move;
    background-color: silver;
    position: absolute;
    top: 60px;
    right: 30px;
    width: 199px;
    height: 100px;
    box-shadow: 0 2px 24px 2px hsla(205, 7%, 52%, .3);
  }
</style>
